import { Button,Flex, WhiteSpace } from 'antd-mobile';
import React, { Component } from 'react'
import styles from './flex.module.css'
export default class Group extends Component {
      render() {
        return (
        <div className={styles.flexcontainer}>
          <div className={styles.subtitle}>Basic</div>
          <Flex wrap="wrap" justify="center">
            <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
          <Flex>
            <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
                        <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
          <Flex>
            <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
            <Flex.Item><Button type="primary" /></Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
      
          <div className="sub-title">Wrap</div>
          <Flex wrap="wrap-reverse" justify="center">
          <div style={{width:"120px",height:"40px",backgroundColor:"red",marginLeft:"20px",marginTop:"20px"}}></div>
          <div style={{width:"120px",height:"40px",backgroundColor:"red",marginLeft:"20px",marginTop:"20px"}}></div>
          <div style={{width:"120px",height:"40px",backgroundColor:"red",marginLeft:"20px",marginTop:"20px"}}></div>
          <div style={{width:"120px",height:"40px",backgroundColor:"red",marginLeft:"20px",marginTop:"20px"}}></div>
          <div style={{width:"120px",height:"40px",backgroundColor:"red",marginLeft:"20px",marginTop:"20px"}}></div>
          <div style={{width:"120px",height:"40px",backgroundColor:"red",marginLeft:"20px",marginTop:"20px"}}></div>
          <div style={{width:"120px",height:"40px",backgroundColor:"red",marginLeft:"20px",marginTop:"20px"}}></div>

          </Flex>
          <WhiteSpace size="lg" />
      
          <div className={styles.subtitle}>Align</div>
          <Flex justify="center"  wrap="wrap-reverse" alignContent="center">
            <div style={{width:"60px",height:"40px",backgroundColor:"pink",marginLeft:"20px",marginTop:"20px"}}></div>
            <div style={{width:"60px",height:"40px",backgroundColor:"pink",marginLeft:"20px",marginTop:"20px"}}></div>
            <div style={{width:"60px",height:"40px",backgroundColor:"red",marginLeft:"20px",marginTop:"20px"}}></div>
            <div style={{width:"60px",height:"40px",backgroundColor:"pink",marginLeft:"20px",marginTop:"20px"}}></div>
            <div style={{width:"60px",height:"40px",backgroundColor:"pink",marginLeft:"20px",marginTop:"20px"}}></div>
            <div style={{width:"60px",height:"40px",backgroundColor:"red",marginLeft:"20px",marginTop:"20px"}}></div>
            <div style={{width:"60px",height:"40px",backgroundColor:"pink",marginLeft:"20px",marginTop:"20px"}}></div>
            <div style={{width:"60px",height:"40px",backgroundColor:"pink",marginLeft:"20px",marginTop:"20px"}}></div>
          </Flex>
          <WhiteSpace />
          <Flex justify="end">
            <Button type="primary"  />
            <Button type="primary"  />
            <Button type="primary"  />
          </Flex>
          <WhiteSpace />
          <Flex justify="between">
            <Button type="primary"  />
            <Button type="primary"  />
            <Button type="primary"  />
          </Flex>
      
          <WhiteSpace />
          <Flex align="start">
            <Button type="primary"  />
            <Button type="primary" />
            <Button type="primary"  />
          </Flex>
          <WhiteSpace />
          <Flex align="end">
            <Button type="primary"  />
            <Button type="primary" />
            <Button type="primary"  />
          </Flex>
          <WhiteSpace />
          <Flex align="baseline">
            <Button type="primary"  />
            <Button type="primary" />
            <Button type="primary"  />
          </Flex>
        </div>
      )
}
}
